<template>
   <div class="row input-group" :class="columns" :style="inputStyle">
     <slot></slot>
   </div>
</template>

<script lang='ts'>
import { computed, defineComponent } from 'vue'

export type AlignDicType = {[key: string]: string}
export default defineComponent({
  name: 'ChuGroup',
  props: {
    cols: {
      type: [String, Number],
      default: 1
    },
    align: String
  },
  setup (props) {
    const columns = computed(() => {
      const className = 'row-cols-' + props.cols
      const classObj: { [k: string]: boolean } = {}
      classObj[className] = true
      return classObj
    })
    const inputStyle = computed(() => {
      const fMap: AlignDicType = {
        right: 'flex-end',
        left: 'flex-start',
        center: 'center'
      }
      return {
        justifyContent: fMap[props.align || 'left']
      }
    })
    return {
      columns,
      inputStyle
    }
  }
})
</script>

 <style>
 </style>
